<template>
  <Waterfall :list="data" :gutter="gutter" :breakpoints="{1200:{rowPerView:4,}
  ,800:{rowPerView:3,},500: {rowPerView: 2,}}" :loadProps="{loading,error}">
    <template #item="{ item }">
      <div>
        <slot name="item" :item='item'></slot>
      </div>
    </template>
  </Waterfall>
</template>

<script>
// https://github.com/heikaimu/vue-waterfall-plugin
import { Waterfall } from 'vue-waterfall-plugin-next'
// import { LazyImg } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/style.css'
import loading from '@/assets/imge/inco/logo.png'
import error from '@/assets/imge/inco/logo.png'

export default {
  name: "MyWaterfall",
  props: {
    data: {
      type: Array,
      default: null,
    },
    gutter: {
      type: Number,
      default: 10
    }
  },
  components: {
    Waterfall,
    // LazyImg
  },
  data () {
    return {
      loading,
      error,
      list1: [
        {
          fimg: "ddd.png",
          fromPageTitleEnc: 1,
        },
        {
          fimg: "ddd.png",
          fromPageTitleEnc: 1,
        },
        {
          fimg: "ddd.png",
          fromPageTitleEnc: 1,
        },
        {
          fimg: "ddd.png",
          fromPageTitleEnc: 1,
        },
      ]
    }
  }
}
</script>

<style scoped>
.img {
  border-radius: 6px;
  max-height: 300px;
}
</style>